<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<link type="text/css" rel="stylesheet"
	href="<c:url value='/css/UDStyle.css'/>" media="screen" />
<script type="text/javascript" src="<c:url value='/js/UDCore.js'/>"></script>
<script type="text/javascript" src="<c:url value='/js/UDModules.js'/>"></script>
<script type="text/javascript"
	src="<c:url value='/js/edit_diagram.js'/>"></script>
<link href="<c:url value='/css/docs.css'/>" rel="stylesheet">
<link href="<c:url value='/css/prettify.css'/>" rel="stylesheet">
<link href="<c:url value='/css/draw.css'/>" rel="stylesheet">
<link href="<c:url value='/css/easyui.css'/>" rel="stylesheet">
<link href="<c:url value='/css/icon.css'/>" rel="stylesheet">

<link rel="shortcut icon" href="<c:url value='/img/favicon.png'/>">
<script src="<c:url value='/js/jquery.min.js'/>"></script>
<script type="text/javascript"
	src="<c:url value='/js/jquery.easyui.min.js'/>"></script>
<script type="text/javascript">
	var app;
	var width;
	window.onload = function() {
		width = window.innerWidth - 250;

		if (width < 400)
			width = 400;
		if (width > 1000)
			width = 1100;

		app = new Application({
			id : 'umldiagram',
			width : width,
			height : 580
		});
		app.setXMLString('${diagram}');
		var baseUri = "${uri}";
		//alert(baseUri);

		// 获取entity list构建弹出框
		jQuery
				.ajax({
					type : 'GET',
					contentType : 'application/json',
					url : 'domain_entity/json/list',
					dataType : 'json',
					success : function(data) {
						if (data && data.success == "true") {
							$("#entity_list tbody").html("");
							var rows = $("<tbody></tbody>");
							$
									.each(
											data.data,
											function(n, value) {
												var tr = $("<tr></tr>");
												var selectTd = $(
														"<td id='td_uri'></td>")
														.append(
																"<input type='checkbox' id='uri' name='uri' value='"
									+ value.uri + "'>");
												var typeTd = $("<td></td>")
														.append(
																'<a rel="tooltip" href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="'
																		+ value.description
																		+ '">'
																		+ value.type
																		+ '</a>');
												var nameTd = $("<td></td>")
														.append(value.name);
												var cnNameTd = $("<td></td>")
														.append(value.cnName);
												tr.append(selectTd).append(
														typeTd).append(nameTd)
														.append(cnNameTd)
														.appendTo(rows);
											});
							$("#entity_list tbody").html(rows.html());
						}
					},
					error : function() {
						alert("error");
					}
				});

		$("#btn_submit_class_diagram").click(function() {
			$("#currentdiagram").val(app.getXMLString());
		});

		$(function() {
			$("#entity_list").tooltip({
				selector : "a[rel=tooltip]"
			});
			$('#myModal').dialog('close');
		});
	}
	function onCloseDialog() {
		var uriArray = new Array();
		// uriArray.push('domain_entity:data:'+'${uri}');
		$("#entity_list tbody tr").each(function() {
			if ($(this).children("#td_uri").children("#uri").prop("checked")) {
				var uri = $(this).children("#td_uri").children("#uri").val();
				uriArray.push(uri);
			}
		});
		$.post('domain_entity/data/' + '${uri}' + '/diagram', {
			'uris[]' : uriArray,
			'currentdiagram' : app.getXMLString()
		}, function(data) {
			if (data.success == 'true') {
				$("#umldiagram").empty();
				app = new Application({
					id : 'umldiagram',
					width : width,
					height : 580
				});
				app.setXMLString(data.data);
			}
		}, 'json');
	}
	function dlgCancel() {
		$('#myModal').dialog('close');
	}
	function selectEntity() {
		$("#myModal").dialog('close');
		onCloseDialog();
	}
	function goback() {
		history.go(-1);
	}
</script>


<div class="row-fluid" style="margin-top: 20px;">
	<form action="domain_entity/data/${uri}/diagram/submit" method="post"
		id="form" style="float: right; margin-right: 20px;">
		<input type="hidden" id="currentdiagram" name="currentdiagram">
		<button type="submit" class="btn" id="btn_submit_class_diagram">
			<i class="icon-ok"></i>&nbsp;提交类图
		</button>
	</form>
		
		<button class="btn" onclick="javascript:$('#myModal').dialog('open')" style="float: right; margin-right: 20px;">
			<i class="icon-edit"></i>&nbsp;添加关联类
		</button>
		<button class="btn" onclick="goback()" style="float: right; margin-right: 20px;">
			<i class="icon-remove"></i>&nbsp;取消
		</button>

	<div id="umldiagram"></div>
</div>
<div id="myModal" class="easyui-dialog" title="领域实体列表"
	style="width: 800px; height: auto; padding: 10px" closed="false"
	data-options="iconCls: 'icon-add-dialog'" buttons="#dlg-buttons">
	<div>
		<table class="table table-hover" id="entity_list">
			<thead>
				<tr>
					<th>选择</th>
					<th>类型</th>
					<th>名称</th>
					<th>中文名称</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
	</div>
</div>
<div id="dlg-buttons" style="float: right;">
	<a href="javascript:void(0)" class="easyui-linkbutton"
		iconCls="icon-ok-dialog" id="btn_select_entity"
		onclick="selectEntity()">确定</a> <a href="javascript:void(0)"
		class="easyui-linkbutton" iconCls="icon-cancel-dialog"
		onclick="dlgCancel()">取消</a>
</div>
